<template>
	<view class="parent">
		<view class="cell">
			<view class="cell-item" @click="chooseAvatar">
				<text class="cell-label">头像</text>
				<image class="avatar" :src="user.pic"></image>
				<u-icon name="arrow-right" color="#888" size="28"></u-icon>
			</view>
			<u-line color="#ccc" />
		</view>
		
		<u-cell-group style="margin-top: 30rpx;">
			<u-cell-item title="昵称" :value="user.nick" @click="showDialogNick" ></u-cell-item>
			<u-cell-item title="性别" :value="user.sex == 2? '女': '男' " :arrow="false"></u-cell-item>
			<u-cell-item title="签名" :value="user.mysign" @click="showDialogSign" ></u-cell-item>
			<u-cell-item title="我的标签" @click="toEditTag" >
				<u-tag class="tag" v-for="(item, index) in tags" :text="item" shape="circle" />
			</u-cell-item>
			
		</u-cell-group>
		
		
		<u-cell-group style="margin-top: 30rpx;">
			<u-cell-item title="生日" :value="user.birthday || '请选择生日'" @click="showPickerBirthday" ></u-cell-item>
			<u-cell-item title="身高" :value="user.shengao || '请选择身高'" @click="showPickerHeight" ></u-cell-item>
			<u-cell-item title="体重" :value="user.tizhong || '请选择体重'" @click="showPickerWeight" ></u-cell-item>
			<u-cell-item title="年收入" :value="user.nianshouru || '请选择年收入'" @click="showPickerIncome" ></u-cell-item>
			<u-cell-item title="学历" :value="user.eduStatusRu || '请选择学历'" @click="showPickerEducation" ></u-cell-item>
			<u-cell-item title="职业" >
				<picker slot="right-icon" mode=multiSelector :value="workerindex" :range="workerList" range-key="name"
				 @columnchange="workerChange" @change="workerConfirm">
					<view>{{user.zhiyename  || '请选择职位'}}</view>
				</picker>
			</u-cell-item>
		</u-cell-group>
		
		<view style="margin: 30rpx 0; background-color: white; padding: 30rpx;" @click="onPhotoTip">
			<uni-file-picker limit="3" title="个人形象照" :source-type="sourceType" @select="selectPhoto" @delete="deletePhoto"
			ref="files" :auto-upload="false" :value="photos" :disabled="disabledPhoto"></uni-file-picker>
		</view>
		

		<u-picker v-model="brithdayVisiable" mode="time" @confirm="birthdayConfirm"></u-picker>
		<u-picker v-model="heightVisiable" mode="selector" :range="heightList" range-key='value' @confirm="heightConfirm"></u-picker>
		<u-picker v-model="weightVisiable" mode="selector" :range="weightList" range-key='value' @confirm="weightConfirm"></u-picker>
		<u-picker v-model="incomeVisiable" mode="selector" :range="incomeList" range-key='value' @confirm="incomeConfirm"></u-picker>
		<u-picker v-model="educationVisiable" mode="selector" :range="educationList" range-key='value' @confirm="educationConfirm"></u-picker>
		<u-picker v-model="workerVisiable" mode="multiSelector" :range="workerList" @confirm="workerConfirm"
			@columnchange="workerChange" ref="pickerWorker" :default-selector='workerindex' range-key="name"></u-picker>
		<u-popup v-model="editVisiable" mode="bottom" border-radius="30" height="400" :closeable="true">
			<view class="popup-view">
				<view class="popup-title">
					{{editTitle}}
				</view>
				<view class="popup-content">
					<u-input v-model="editContent" type="text" :border="true" />
				</view>
				<view class="popup-bottom" >
					<u-button type="primary" @click="editConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
		
	</view>

</template>

<script>
	import { ossUpload } from '@/js_sdk/jason-alioss-upload/oss.js'
	import constant from '@/common/constant.js';
	
	export default {
		data() {
			return {
				userId: '',
				user: {},
				photos: [],
				sourceType: ['album', 'camera'],
				
				editVisiable: false,
				editType: '',//1.昵称；2.个性签名
				editTitle: '',
				editContent:'',
				nick: '一帘幽梦',
				sign: '我很懒什么都没留下',
				checked: false,
				brithdayVisiable: false,
				brithday: '请选择生日',
				heightVisiable: false,
				height: '请选择身高',
				heightList: [],
				weightVisiable: false,
				weight: '请选择体重',
				weightList: [],
				incomeVisiable: false,
				income: '请选择年收入',
				incomeList: [],
				educationVisiable: false,
				education: '请选择学历',
				educationList: [],

				workerindex: [0, 0],
				workerVisiable: false,
				worker: '请选择职位',
				workerList: [],
				subWorkerList: [],
				
				tags:[],
				disabledPhoto:true
			}
		},
		
		onLoad(option) {
			this.userId = option.userId;
			this.requestUser();
			this.requestWorkerList();
			if(uni.getStorageSync('carmeraInfoPhoto')){
				this.disabledPhoto = false;
			}
		},
		
		methods: {
			onPhotoTip(){
				if(this.disabledPhoto){
					uni.showModal({
						content:'是否允许popose"拍摄照片，录制视频，存储权限"，用于上传个人形象照？',
						confirmText:'允许',
						success: res=>{
							if(res.confirm){
								uni.setStorageSync('carmeraInfoPhoto', true);
								this.disabledPhoto = false;
							}
						}
					})
				}
			},
			chooseAvatar() {
				const carmeraAvatar = uni.getStorageSync('carmeraInfoAvatar');
				if(carmeraAvatar){
					uni.chooseImage({
						count: 1,
						success: async (file) => {
						  const {success, data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'img/android/')
						  if(success) {
							this.requestAvatar(data)
						  } else {
							uni.showToast({icon:'none', title: data})
						  }
						}
					});
					return
				}
				uni.showModal({
					content:'是否允许popose"拍摄照片，录制视频，存储权限"，用于上传个人头像？',
					confirmText:'允许',
					success: res=>{
						if(res.confirm){
							uni.setStorageSync('carmeraInfoAvatar', true);
							uni.chooseImage({
								count: 1,
								success: async (file) => {
								  const {success, data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'img/android/')
								  if(success) {
									this.requestAvatar(data)
								  } else {
									uni.showToast({icon:'none', title: data})
								  }
								}
							})
						}
					}
				})
			},
			
			showDialogNick(){
				this.editType = "1";
				this.editTitle = '修改昵称';
				this.editContent = this.user.nick;
				this.editVisiable = true;
			},
			showDialogSign(){
				this.editType = "2";
				this.editTitle = '修改个性签名';
				this.editContent = this.user.mysign;
				this.editVisiable = true;
			},
			editConfirm(){
				this.editVisiable = false;
				if("1" == this.editType){
					this.requestNick(this.editContent);
				}
				if("2" == this.editType){
					this.requestSign(this.editContent);
				}
				console.log(this.editContent);
			},
			
			showPickerBirthday() {
				this.brithdayVisiable = true;
			},
			birthdayConfirm(event) {
				let brithday = event.year + "-" + event.month + "-" + event.day;
				this.requestBirthday(brithday);
			},

			showPickerHeight() {
				if(0 == this.heightList.length){
					this.requestHeightList();
					return
				}
				this.heightVisiable = true;
			},
			heightConfirm(event) {
				this.requestHeight(this.heightList[event]);
			},

			showPickerWeight() {
				if(0 == this.weightList.length){
					this.requestWeightList();
					return
				}
				this.weightVisiable = true;
			},
			weightConfirm(event) {
				this.requestWeight(this.weightList[event]);
			},

			showPickerIncome() {
				if(0 == this.incomeList.length){
					this.requestIncomeList();
					return
				}
				this.incomeVisiable = true;
			},
			incomeConfirm(event) {
				this.requestIncome(this.incomeList[event]);
			},

			showPickerEducation() {
				if(0 == this.educationList.length){
					this.requestEducationList();
					return
				}
				this.educationVisiable = true;
			},
			educationConfirm(event) {
				this.requestEducation(this.educationList[event]);
			},

			showPickerWorker() {
				if(0 == this.workerList.length){
					this.requestWorkerList();
					return
				}
				this.workerVisiable = true;
			},
			workerChange(event) {
				console.log(JSON.stringify(event.detail));
				this.workerindex[event.detail.column] = event.detail.value;
				if (event.detail.column == 0) {
					this.workerList[1] = this.subWorkerList[event.detail.value];
					this.workerindex[1] = 0;
				}
				console.log(JSON.stringify(this.workerList));
				this.$forceUpdate();
			},
			workerConfirm(event) {
				console.log("e:"+JSON.stringify(event.detail));
				const item = this.workerList[1][event.detail.value[1]];
				console.log("item:"+JSON.stringify(item));
				// this.worker = item.name;
				this.requestWorker(item);
			},

			toAccount() {
				uni.navigateTo({
					url: '/pages/tab/mine/account/account'
				})
			},
			
			// 新增图片
			async selectPhoto(event) {
				console.log("新增图片"+JSON.stringify(event));
				event.tempFilePaths.forEach(item => {
					uni.uploadFile({
						url: constant.baseUrl + '/app/geren/upxingxiang',
						filePath: item,
						header:{
							token: uni.getStorageSync("token")
						},
						name: 'image',
						success: res => {
							console.log("res: " + JSON.stringify(res));
							var data = JSON.parse(res.data);
							this.photos.push({url: data.data});
						},
						fail: error => {
							console.log("error: " + JSON.stringify(error));
						}
					});
				});
				
			},
			async deletePhoto(event){
				// console.log("event: " + JSON.stringify(event));
				let params = {pic: event.tempFilePath};
				let res = await this.$common.post('/app/geren/delxxpic', params);
				if(0 == res.code){
					this.user = res.data;
					this.photos = this.photos.filter(item => {
						return item.url !== event.tempFilePath;
					})
					console.log("this.photos: " + JSON.stringify(this.photos));
				}
			},
			
			toEditTag(){
				uni.navigateTo({
					url:'/pages/user/edit/tag/tag?userId='+this.userId,
					events:{
						sendTags: res => {
							console.log("res: " + JSON.stringify(res));
							if(res.data){
								this.tags = res.data.split(',');
							}
						}
					},
					fail: (error) => {
						console.log("error: " + JSON.stringify(error));
					}
				})
			},
			
			async requestUser(userId){
				let res = await this.$common.post('/app/usermessage/getMessage');
				if(0 == res.code){
					this.user = res.data;
					if(this.user.xingxiang){
						let xingxiang = this.user.xingxiang;
						if(xingxiang.charAt(xingxiang.length - 1) === ','){
							xingxiang = xingxiang.slice(0, -1);
						}
						let banners = xingxiang.split(',');
						banners.forEach(item=>{
							this.photos.push({url: item});
						});
					}
					if(this.user.biaoqianname){
						this.tags = this.user.biaoqianname.split(',');
						console.log("this.tags: " + JSON.stringify(this.tags));
					}
				}
			},
			async requestAvatar(avatar){
				let params = {pic: avatar}
				let res = await this.$common.post('/app/geren/uppic', params);
				if(0 == res.code){
					this.user.pic = avatar;
					uni.setStorageSync("userPic", avatar);
				}
			},
			async requestNick(nick){
				let params = {nick: nick}
				let res = await this.$common.post('/app/geren/upnick', params);
				if(0 == res.code){
					this.user.nick = nick;
					uni.setStorageSync("userName", nick);
				}
			},
			async requestSign(mySign){
				let params = {mysign: mySign}
				let res = await this.$common.post('/app/geren/upmysign', params);
				if(0 == res.code){
					this.user.mysign = mySign;
				}
			},
			async requestBirthday(birthday){
				let params = {birthday: birthday}
				let res = await this.$common.post('/app/geren/upbirthday', params);
				if(0 == res.code){
					this.user.birthday = birthday;
				}
			},
			async requestHeight(data){
				let params = {shengao: data.id}
				let res = await this.$common.post('/app/geren/upshengao', params);
				if(0 == res.code){
					this.user.shengao = data.value;
				}
			},
			async requestHeightList(){
				let res = await this.$common.post('/app/user/getShengao');
				if(0 == res.code){
					this.heightList = res.data;
					if(this.heightList.length > 0){
						this.showPickerHeight();
					}
				}
			},
			async requestWeight(data){
				let params = {tizhong: data.id}
				let res = await this.$common.post('/app/geren/uptizhong', params);
				if(0 == res.code){
					this.user.tizhong = data.value;
				}
			},
			async requestWeightList(){
				let res = await this.$common.post('/app/user/getTizhong');
				if(0 == res.code){
					this.weightList = res.data;
					if(this.weightList.length > 0){
						this.showPickerWeight();
					}
				}
			},
			async requestIncome(data){
				let params = {nianshouru: data.id}
				let res = await this.$common.post('/app/geren/upnianshouru', params);
				if(0 == res.code){
					this.user.nianshouru = data.value;
				}
			},
			async requestIncomeList(){
				let res = await this.$common.post('/app/user/getNianShouRu');
				if(0 == res.code){
					this.incomeList = res.data;
					if(this.incomeList.length > 0){
						this.showPickerIncome();
					}
				}
			},
			async requestEducation(data){
				let params = {xueliru: data.id}
				let res = await this.$common.post('/app/geren/upxueli', params);
				if(0 == res.code){
					this.user.eduStatusRu = data.value;
				}
			},
			async requestEducationList(){
				let res = await this.$common.post('/app/user/getXueLiRu');
				if(0 == res.code){
					this.educationList = res.data;
					if(this.educationList.length > 0){
						this.showPickerEducation();
					}
				}
			},
			
			async requestWorker(item){
				let res = await this.$common.post('/app/geren/upzhiye', {zhiyecode: item.code});
				if(0 == res.code){
					this.user.zhiyename = item.name;
				}
			},
			async requestWorkerList(){
				let res = await this.$common.post('/app/user/getZhiYe');
				if(0 == res.code){
					let workerOne = [];
					res.data.forEach(item => {
						workerOne.push(item);
						this.subWorkerList.push(item.zhiyeList);
					});
					this.workerList.push(workerOne);
					this.workerList.push(this.subWorkerList[0]);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.cell {
		display: flex;
		flex-direction: column;
		height: 100rpx;
		box-sizing: border-box;
		background-color: white;

		.cell-item {
			display: flex;
			height: 100%;
			width: 100%;
			flex-direction: row;
			flex: 1;
			align-items: center;
			padding: 0 30rpx;

			.cell-label {
				flex: 1;
				color: #555;
			}

			.avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
		}
	}
	
	.tag{
		margin: 5rpx;
	}

	.btn-logout {
		margin: 100rpx 50rpx;
	}
	
	.popup-view{
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		height: 100%;
		
		.popup-title{
			font-size: 36rpx;
			color: #222;
			margin-top: 10rpx;
			text-align: center;
		}
		
		.popup-content{
			flex: 1;
			display: flex;
			flex-direction: row;
			margin: 30rpx 0;
		}
		.popup-bottom{
			margin: 0 30rpx;
		}
	}
</style>